<template>
	<view>
		<view class="dao_card">
			<!-- 详细内容 -->
			<view class="dao_content">
				<BsinTitle :text="activityDetail.activityNane"></BsinTitle>

				<view class="dao_logo">
					<image :src="activityDetail.activityImg" mode=""></image>
				</view>

				<BsinTitle text="活动时间地址"></BsinTitle>
				<view class="description">
					{{activityDetail.activityTime}} - {{activityDetail.activityAddress}}
				</view>

				<BsinTitle text="活动介绍"></BsinTitle>
				<view class="description">
					{{activityDetail.description}}
				</view>
				<view class="description">
					须持有 s11e-dao的身份NFT
				</view>
			</view>
			<view class="under_box">
				<u-toast ref="uToast"></u-toast>
				<view class="join_btn">
					<u-button v-if="submitStatus == 0" text="报名" 　@click="signUpActivity(toastInfo)"
						color="var(--echo-main-color)" shape="circle">
					</u-button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getActivityDetail,
		signUp
	} from '@/config/activity.js'
	export default {
		data() {
			return {
				toastInfo: {
					type: 'default',
					message: "需要持有daobook pass 卡",
					iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/default.png'
				},
				submitStatus: 0,
				activityDetail: {},
				activityId: '',
				token: ''
			}
		},
		async onLoad({
			serialNo
		}) {
			this.token = uni.getStorageSync('token');
			console.log(serialNo);
			this.activityId = serialNo
			// 活动那个详情
			this.activityDetail = (await getActivityDetail({
				serialNo
			})).data
		},
		methods: {
			async signUpActivity(params) {
				if (!this.token) {
					uni.$u.toast('请先登陆')
					return
				}
				var serialNo = this.activityId;
				var res = await signUp({
					serialNo
				});

				if (res.code !== '000000') {
					this.$refs.uToast.show({
						...params,
						complete() {
							params.url && uni.navigateTo({
								url: params.url
							})
						}
					})
				} else {
					// 将领取按钮置灰
					this.submitStatus = 1
					this.$refs.uToast.show({
						message: "报名成功"
					})
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.dao_card_bg {
		height: 400rpx;
		background-color: $echo-main-color;
	}

	.dao_card {
		z-index: 2;
		margin-top: 10rpx;
		border-top-left-radius: 50rpx;
		border-top-right-radius: 50rpx;
		background-color: #fff;
		padding: 0 40rpx;

		// logo
		.dao_logo {
			width: 100;
			height: 400rpx;
			overflow: hidden;
			margin: 0 auto;
			position: relative;

			image {
				width: 100%;
				height: 100%;
			}
		}

		// content
		.dao_content {
			padding-bottom: 200rpx;

			// 标题
			.title {
				font-size: $echo-font-size-title;
				font-weight: 700;
				text-align: center;
				margin-top: 20rpx;
			}

			// 点赞收藏列表
			.likeList {
				margin: 40rpx;
				display: flex;
				justify-content: center;

				&_item {
					display: flex;
					width: 30%;
					align-items: center;
					justify-content: center;

					.num {
						margin-left: 16rpx;
					}
				}
			}

			// 支持按钮
			.support_btn {
				display: flex;
				align-items: center;
				padding: 20rpx;
				background-color: $echo-main-color;
				font-weight: 400;
				border-radius: 8rpx;
				color: #fff;

				.support {
					margin-left: 20rpx;
				}

				.proverb {
					flex: 1;
					text-align: right;
					margin-right: 20rpx;
				}
			}

			// 描述信息
			.description {
				padding: 0 30rpx;
				line-height: 60rpx;
			}
		}

		.under_box {
			position: fixed;
			padding: 40rpx;
			bottom: 0;
			left: 0;
			width: 100%;
			background-color: #f8f9fa;
			border-top: 0.5px solid #dee2e6;

			.join_btn {
				width: 90%;
			}
		}
	}
</style>
